<template>
    <layout-view :allModel="allModel" style="height: 100%;">
        <template v-for="(item,key) of allModel" #[key] >
           <div class="FormCustomControl-component">
               <div class="FormCustomControl-name" v-if="item.selectModel.config.showName">{{item.selectModel.config.name}}</div>
               <div class="FormCustomControl-center" :style="[item.selectModel.name=='tree'?'':'padding: 0px 10px;']">
                   <template v-if="allModel[key].showTab =='yes'">
                       <layout-tab  :tabs="allModel[key].tabData" ></layout-tab>
                   </template>
                   <template v-else>
                       <template v-if=" allModel[key].selectModel && allModel[key].selectModel.name">
                           <component :localParams="localParams" :ref="allModel[key].selectModel.config.alias" v-bind:is="allModel[key].selectModel.name+'View'" :config="allModel[key].selectModel.config"></component>
                       </template>
                   </template>
               </div>
           </div>
        </template>
    </layout-view>
</template>

<script>
/**
 * 经典布局
 */
import LayoutView from "./LayoutView.vue";
import LayoutTab from "./LayoutTab.vue";
import FormView from "../components/FormView/FormView.vue";
import ListView from "../components/ListView/ListView.vue";
import TreeView from "../components/TreeView/TreeView.vue";
import formCustomViewEvent from "@/views/modules/form/FormCustomView/js/formCustomViewEvent.js";

export default {
    name: "CustomLayoutView",
    components: {
        LayoutView,
        LayoutTab,
        FormView,
        ListView,
        TreeView
    },
    mixins:[formCustomViewEvent],
    props: {
        layout:{},
        localParams:{
            type:Object,
        }
    },
    data() {
        return {
            allModel:{},
            mode:'classics',//经典布局
        }
    },
    created() {
        this.init();
    },
    methods: {
        init(){
            if(!this.layout || !this.layout.layoutModel){
                return;
            }
            for (let key in this.layout.layoutModel) {
                if(this.layout.layoutModel[key]){
                    this.allModel[key]=this.layout[key];
                }
            }
        }
    },
    watch: {},
}
</script>

<style scoped>
.FormCustomControl-component{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: auto;
}
.FormCustomControl-name{
    height: 40px;
    line-height: 40px;
    padding: 0px 10px;
    border-bottom: 1px solid #dadde0;
}
.FormCustomControl-center{
    flex: 1;
    overflow: auto;
}
</style>
